<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div class="div-relative">
    <Row :gutter="10">
      <Card>
        <div class="table-head">
          <Button type="error" class="Button" @click="updateStatue('all', 'end')">关机</Button>
          <Button type="info" class="Button" @click="updateStatue('all', 'start')">开机</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data" @on-row-click=""
                 @on-selection-change="selectionChange" ref="selectionTable"></Table>
        </Row>
        <!--<div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>-->
      </Card>
    </Row>
    <spin-page :showSpin="showSpin"></spin-page>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import spinPage from '../components/spin-page.vue';
  export default {
    components: {
      spinPage
    },
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        order_by: [],
        id: '',
        searchConName: '',
        searchConTel: '',
        showCurrentTableData: false,
        loading: true,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'name',
            title: '居委会名称',
            align: 'center',
          },
          {
            key: 'ip',
            title: 'IP地址',
            align: 'center',
          },
          {
            title: '操作',
            key: 'action',
            width: 160,
            align: 'center',
            render: (h, params) => {
              var start = h('Button', {
                props: {
                  type: 'info',
                  size: 'small',
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: e => {
                    e.stopPropagation();
                    var data = params.row;
                    this.updateStatue(data, 'start');
                  }
                }
              }, '开机');
              var end = h('Button', {
                props: {
                  type: 'error',
                  size: 'small',
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: e => {
                    e.stopPropagation();
                    var data = params.row;
                    this.updateStatue(data, 'end');
                  }
                }
              }, '关机');

              var ButtonArr = [start, end];
              return h('div', ButtonArr);
            }
          }
        ],
        data: [
          {
            id: 1,
            name: '舜奥社区居委会',
            ip: '123.233.45.216',
          },
          {
            id: 2,
            name: '奥龙社区居委会',
            ip: '112.34.110.156',
          },
          {
            id: 3,
            name: '龙奥社区居委会',
            ip: '59.63.206.154',
          },
          {
            id: 4,
            name: '白鹭社区居委会',
            ip: '171.90.87.62',
          },
          {
            id: 5,
            name: '舜宁社区居委会',
            ip: '110.249.201.203',
          },
          {
            id: 6,
            name: '汇德社区居委会',
            ip: '110.249.202.40',
          },
          {
            id: 7,
            name: '舜义社区居委会',
            ip: '60.217.105.163',
          },
          {
            id: 8,
            name: '舜信社区居委会',
            ip: '110.249.202.131',
          },
          {
            id: 9,
            name: '舜智社区居委会',
            ip: '110.249.202.143',
          },
          {
            id: 10,
            name: '舜兴社区居委会',
            ip: '110.249.201.168',
          },
        ],
        dataDetail: {},
        initTable: [],
        addCurrentTableData: false,
        saveLoading: false,
        ajaxType: 'add',
        addData: {
          name: '',
          maximum: 1,
          seat: 1,
          is_projector: false,
          description: '',
        },
        selectionArr: [],
        showSpin: false,//加载中
      };
    },
    mounted () {
    },
    methods: {
      updateStatue: function (data, status) {
        var _this = this;
        if (data == 'all' && _this.selectionArr.length == 0) {
          _this.$Message.destroy();
          _this.$Message.error('请先选择机器');
          return false;
        }
        if (status == 'start') {
          _this.$Message.destroy();
          _this.$Message.success('正在开机...');
        } else if (status == 'end') {
          _this.$Message.destroy();
          _this.$Message.success('正在关机...');
        }
      },
      // 列表多选 选中数据
      selectionChange: function (selection) {
        var _this = this;
        _this.selectionArr = selection;
      },
    }
  };
</script>
